<template>
  <div class="law-firm-audit right-height bg-c-fff mb70">
    <h2 class="box-title rel">企业资质审核</h2>
    <div class="right-box">
      <div class="tab">
        <ul class="fix">
          <li class="flo-left cup" v-bind:class="{active:index===1}" @click="tab(1)">待审核</li>
          <li class="flo-left cup" v-bind:class="{active:index===2}" @click="tab(2)">已通过</li>
          <li class="flo-left cup" v-bind:class="{active:index===3}" @click="tab(3)">已拒绝</li>
        </ul>
        <div class="tab-inner">
          <table class="tab-con" width="100%" v-show="index===1">
            <tr>
              <th width="10%">企业名称</th>
              <th width="12%">注册手机账号</th>
              <th width="15%">提交审核时间</th>
              <th width="15%">资质详情</th>
              <th width="20%">操作</th>
            </tr>
            <tr v-for="item in allList">
              <td>{{item.account}}</td>
              <td>{{item.registPhone}}</td>
              <td>
                {{item.auditTime}}
              </td>
              <td>
                <a :href="'#/company-aptitude-audit-details?id='+item.id" target="_blank">
                  <button class="xl-btn-css blue-button">查看详情</button>
                </a>
              </td>
              <td class="cz-button">
                <button class="auto small-btn-css" @click="onBtnClick(item.id,1)">通过</button>
                <button class="auto small-btn-css" @click="onBtnClick(item.id,2)">拒绝</button>
              </td>
            </tr>
          </table>
          <table class="tab-con" width="100%" v-show="index===2">
            <tr>
              <th width="10%">企业名称</th>
              <th width="12%">注册手机账号</th>
              <th width="15%">提交审核时间</th>
              <th width="15%">资质详情</th>
              <th width="20%">操作</th>
            </tr>
            <tr v-for="item in passedList">
              <td>{{item.account}}</td>
              <td>{{item.registPhone}}</td>
              <td>
                {{item.auditTime}}
              </td>
              <td>
                <a :href="'#/company-aptitude-audit-details?id='+item.id" target="_blank">
                  <button class="xl-btn-css blue-button">查看详情</button>
                </a>
              </td>
              <td class="cz-button">
                <button class="auto small-btn-css show">通过</button>
                <button @click="onBtnClick(item.id,2)" class="auto small-btn-css">拒绝</button>
              </td>
            </tr>
          </table>
          <table class="tab-con" width="100%" v-show="index===3">
            <tr>
              <th width="10%">企业名称</th>
              <th width="12%">注册手机账号</th>
              <th width="15%">提交审核时间</th>
              <th width="15%">资质详情</th>
              <th width="20%">操作</th>
            </tr>
            <tr v-for="item in rejectList">
              <td>{{item.account}}</td>
              <td>{{item.registPhone}}</td>
              <td>
                {{item.auditTime}}
              </td>
              <td>
                <a :href="'#/company-aptitude-audit-details?id='+item.id" target="_blank">
                  <button class="xl-btn-css blue-button">查看详情</button>
                </a>
              </td>
              <td class="cz-button">
                <button @click="onBtnClick(item.id,1)" class="auto small-btn-css">通过</button>
                <button class="auto small-btn-css show">拒绝</button>
              </td>
            </tr>
          </table>
        </div>
        <div class="page-box">
          <pagination :index="allIndex" :total="allTotal" v-show="allList.length!==0&&index===1" @pagechange="onAllChanged"></pagination>
          <pagination :index="passedIndex" :total="passedTotal" v-show="passedList.length!==0&&index===2" @pagechange="onPassedChanged"></pagination>
          <pagination :index="rejectedIndex" :total="rejectedTotal" v-show="rejectList.length!==0&&index===3" @pagechange="onRejectedChanged"></pagination>
        </div>
      </div>
    </div>
    <vodal :show="confirmShow" animation="zoom" :width="420" :height="300" @hide="confirmShow = false">
      <div class="vodal-main">
        <h4>通过企业资质审核申请</h4>
        <div class="con">您正在执行通过企业资质审核申请操作，
          <br>确认通过吗？</div>
        <div class="tc auto vodal-btn-box">
          <button class="blue-button" @click="onReview">确认</button>
          <button class="white-button" @click="confirmShow = false">取消</button>
        </div>
      </div>
    </vodal>
    <vodal :show="refuseShow" animation="zoom" :width="420" :height="300" @hide="refuseShow = false">
      <div class="vodal-main">
        <h4>通过企业资质审核申请</h4>
        <div class="con">您正在执行拒绝企业资质审核申请操作，
          <br>确认拒绝吗？</div>
        <div class="tc auto vodal-btn-box">
          <button class="blue-button" @click="onReview">确认</button>
          <button class="white-button" @click="refuseShow = false">取消</button>
        </div>
      </div>
    </vodal>
  </div>
</template>
<script type="text/javascript">
import Pagination from '../components/Pagination'
export default {
  components: {
    Pagination
  },
  data() {
    return {
      index: 1,
      confirmShow: false,
      refuseShow: false,
      allIndex: 1,
      allTotal: 0,
      allList: [],
      passedIndex: 1,
      passedTotal: 0,
      passedList: [],
      rejectedIndex: 1,
      rejectedTotal: 0,
      rejectList: [],
      currentId: '',
      currentReview: ''
    }
  },
  mounted() {
    this.getListData(0, 1)
  },
  methods: {
    tab(index) {
      this.index = index
      if (this.index === 1) {
        this.getListData(0, this.allIndex)
      }
      if (this.index === 2) {
        this.getListData(1, this.passedIndex)
      }
      if (this.index === 3) {
        this.getListData(2, this.rejectedIndex)
      }
    },
    onBtnClick(id, review) {
      this.currentId = id
      this.currentReview = review
      if (review === 1) {
        this.confirmShow = true
      }
      if (review === 2) {
        this.refuseShow = true
      }
    },
    onReview() {
      this.$http.post('/memberBusniess/confirm/reviewed', {
        id: this.currentId,
        isReviewed: this.currentReview
      }).then(data => {
        if (data.data.httpCode === 200) {
          this.$toasted.show('操作成功')
          if (this.currentReview === 1) {
            this.confirmShow = false
          }
          if (this.currentReview === 2) {
            this.refuseShow = false
          }
          if (this.index === 1) {
            this.allList.forEach((item, index) => {
              if (item.id === this.currentId) {
                this.allList.splice(index, 1)
              }
            })
          }
          if (this.index === 2) {
            this.passedList.forEach((item, index) => {
              if (item.id === this.currentId) {
                this.passedList.splice(index, 1)
              }
            })
          }
          if (this.index === 3) {
            this.rejectList.forEach((item, index) => {
              if (item.id === this.currentId) {
                this.rejectList.splice(index, 1)
              }
            })
          }
        } else {
          this.$toasted.show(data.data.msg)
        }
      }).catch(err => {
        console.log(err)
        this.$toasted.show('网络出错')
      })
    },
    onAllChanged(n) {
      this.getListData(0, n)
    },
    onPassedChanged(n) {
      this.getListData(1, n)
    },
    onRejectedChanged(n) {
      this.getListData(2, n)
    },
    getListData(type, page) {
      this.$http.get('/memberBusniess/get/busniess/reviewed', {
        params: {
          isReviewed: type,
          page: page,
          rows: 10
        }
      }).then(data => {
        if (data.data.httpCode === 200) {
          if (type === 0) {
            this.allList = data.data.rows
            this.allIndex = page
            this.allTotal = Math.ceil(data.data.rows.length / 10)
          }
          if (type === 1) {
            this.passedList = data.data.rows
            this.passedIndex = page
            this.passedTotal = Math.ceil(data.data.rows.length / 10)
          }
          if (type === 2) {
            this.rejectList = data.data.rows
            this.rejectedIndex = page
            this.rejectedTotal = Math.ceil(data.data.rows.length / 10)
          }
        } else {
          this.$toasted.show(data.data.msg)
        }
      }).catch(err => {
        this.$toasted.show('网络出错')
        console.log(err)
      })
    }
  }
}

</script>
<style type="text/css" scoped>
.right-height {
  min-height: 700px;
}

.tab ul {
  height: 40px;
  line-height: 40px;
}

.tab ul li {
  border: 1px solid #01378c;
  padding: 0px 30px;
  margin-right: 10px;
  font-size: 15px;
  color: #01378c;
}

.tab ul li.active {
  background-color: #01378c;
  color: #fff;
}

.tab-inner {
  margin-top: 20px;
}

table td.cz-button button {
  background-color: #3881f2;
  color: #fff;
}

table td button.show {
  background-color: #fff;
  color: #01378c;
}

.vodal-main .con {
  border: 1px solid #ddd;
  padding: 42px 60px;
  line-height: 30px;
}

.page-box {
  margin-top: 20px;
}

</style>
